<template>
	<view class="details">
		<video class="video" id="video" :src="details && details.video_url" controls @play="_play"></video>
		<view class="details-content">
			<scroll-view class="details-scroll" scroll-y @scrolltolower="_scrolltolower">

				<view class="head">
					<view class="head-title">{{ details && details.title }}</view>
					<view class="head_tag__box">
						<view class="head-tags">
							<text class="head-tag free">
								{{ details && Number(details.price) > 0 ? '￥' + details.price : '免费' }}
							</text>
							<text class="head-tag city">
								{{ details && details.category_name }}
							</text>
						</view>
						<u-icon name="gift-fill" color="#fa3534" size="45" @click="showGift = true"></u-icon>
					</view>
					
					<u-popup v-model="showGift" mode="bottom" border-radius="14">
						<scroll-view class="gift_scroll" scroll-y="true">
							<view class="gift_list">
								<view v-for="item in giftList" :key="item.id" class="gift_item" @click="_giveGifts(item)">
									<image :src="item.url" mode="aspectFit" class="gift_cover"></image>
									<view class="gift_name">{{ item.name }}</view>
									<view class="gift_price">{{ Number(item.price) }}个钻石</view>
								</view>
							</view>
						</scroll-view>
					</u-popup>
					
					<view class="head-texts">
						<view class="head-text">
							<image class="head-text-icon" src="/static/images/dianzan-white.png" mode="aspectFit">
							</image>
							<text>{{ details ? details.like_num_str : 0 }} 点赞</text>
						</view>
						<view class="head-text">
							<image class="head-text-icon" src="/static/images/share-icon.png" mode="aspectFit"></image>
							<text>{{ details ? details.share_num_str : 0 }} 分享</text>
						</view>
						<view class="head-text">
							<image class="head-text-icon" src="/static/images/comment-icon.png" mode="aspectFit">
							</image>
							<text>{{ details ? details.comment_num_str : 0 }} 评论</text>
						</view>
						<view class="head-text">
							<image class="head-text-icon" src="/static/images/comment-icon.png" mode="aspectFit">
							</image>
							<text>{{ details ? details.view_num_str : 0 }} 观看</text>
						</view>
						<text class="head-time">{{ details ? details.mtime : '--' }}</text>
					</view>
				</view>
				<view class="avatar-container" @tap="userCenter(details)">
					<view class="user">
						<u-avatar :size="80" :src="details && details.avatar"></u-avatar>
						<view class="user-right">
							<!-- 	<view class="user-name" v-if="details">用户ID:{{ details.username || details.username }} 用户昵称：（进入个人中心修改昵称资料后此处会以昵称代替ID)</view> -->

							<!-- <view class="user-name" v-if="details">用户ID:{{ details.username || details.username }} 用户昵称：{{
								details.nickname || details.username }} </view> -->
							<view class="user-name" v-if="details">{{ details.nickname || details.username }} </view>
						</view>

						<view class="item-head_handler">
							<text class="item-head-handler_text">举报</text>
							<text class="item-head-handler_text">拉黑</text>
							<text class="item-head-handler_btn">关注</text>
						</view>
					</view>

					<!-- 					<view class="user">
						<view class="user-right">
							<view class="user-time" v-if="details">个人简介: <view class="desc">{{ details && details.desc ? details.desc :
								'这个人很懒，什么也没留下~' }}</view>
							</view>

						</view>

					</view> -->
				</view>

				<view class="details-list">
					<view class="details-list__title">交流区</view>

					<view class="details-list__item" v-for="item in list">
						<u-avatar :src="item.avatar"></u-avatar>
						<view class="details-comment">
							<view>
								<view>
									<view class="username">{{ item.nickname || item.username }}</view>
									<view class="time">{{ item.mtime }}</view>
								</view>
								<!-- <u-icon name="thumb-up"></u-icon> -->
							</view>
							<view class="content">{{ item.content }}</view>
							<view class="details-reply">{{ item.reply_num_str }}条回复 <u-icon name="arrow-right"
									style="margin-left: 8rpx;"></u-icon>
							</view>
						</view>
					</view>

					<view class="loadmore">
						<u-loadmore :status="status" @loadmore="_scrolltolower" />
					</view>
				</view>
			</scroll-view>
			<view class="details-input">
				<input type="text" v-model="comment" placeholder="请输入评论内容..." @confirm="_confirm" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	import {
		VideoPlayback,
		Comment,
		CommentList,
		NumberDeductions,
		AddView,
		getGift,
		giveGifts
	} from '@/common/api.js'

	export default {
		data() {
			return {
				details: null,
				comment: '',
				vid: '',
				page: 1,
				list: [],
				status: 'loading',
				is_last: false,
				showGift: false,
				giftList: []
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		onLoad(options) {
			this.vid = options.id
			this._details(options.id)
			this._list()
			this._getGift()
		},
		methods: {
			...mapActions(['updateUserinfo']),
			_giveGifts(item) {
				giveGifts({gift_id: item.id, type: 'GOLD', to_user_id: this.details.user_id}).then(({code, msg}) => {
					uni.showToast({
						title: msg,
						icon: 'none'
					})
				})
			},
			_getGift() {
				getGift().then(({data}) => {
					this.giftList = data.list
				})
			},
			_play() {
				AddView({
					video_id: this.vid
				}).then(res => {})
			},
			_scrolltolower() {
				if (this.is_last) return
				this.status = 'loading'
				this.page++
				this._list()
			},
			userCenter(item) {
				uni.navigateTo({
					url: `/pages/my/user-center/user-center?user_id=${item.user_id}`
				})
			},
			_list() {
				CommentList({
					page: this.page,
					vid: this.vid,
					type: 1,
					limit: 10
				}).then(({
					code,
					data
				}) => {
					if (code === 200) {
						const {
							total_page,
							current_page,
							list
						} = data
						if (current_page === 1) {
							this.list = list
						} else {
							this.list = this.list.concat(list)
						}
						if (current_page >= total_page) {
							this.is_last = true
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
					}
				})
			},
			_details(vid) {
				VideoPlayback({
					vid
				}).then(({
					code,
					data
				}) => {
					if (code === 200) {
						uni.setNavigationBarTitle({
							title: data.title
						})
						this.details = data
						if (this.userinfo.is_vip === 0 || Number(this.details.price) > 0) {
							NumberDeductions().then(({
								code
							}) => {
								if (code === 200) {
									// this.updateUserinfo()
								}
							})
						}
					}
				})
			},
			_confirm() {
				if (!this.comment) return
				Comment({
					type: 1,
					vid: this.vid,
					content: this.comment
				}).then(({
					code,
					msg
				}) => {
					uni.hideKeyboard()
					uni.showToast({
						title: msg,
						icon: 'success'
					})
					if (code === 200) {
						this.comment = ''
						this._list()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gift_price {
		color: #999;
		font-size: 24rpx;
	}
	.gift_list {
		display: flex;
		flex-wrap: wrap;
	}
	.gift_name {
		font-size: 24rpx;
	}
	.gift_scroll {
		height: 750rpx;
		padding: 20rpx;
	}
	.gift_item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.gift_cover {
		width: 100rpx;
		height: 100rpx;
		vertical-align: middle;
	}
	.head_tag__box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.details {
		.item-head_handler {
			flex-direction: row;
			margin-left: 20rpx;
		}

		.item-head-handler_text {
			font-weight: 400;
			font-size: 22rpx;
			line-height: 42rpx;
			margin-right: 30rpx;
		}

		.item-head-handler_btn {
			display: inline-block;
			width: 116rpx;
			height: 46rpx;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 42rpx;
			border-radius: 61rpx 61rpx 61rpx 61rpx;
			border: 1rpx solid #999;
			margin-left: 8rpx;
			text-align: center;
		}

		.head-texts {
			display: flex;
			align-items: center;
			flex-direction: row;
			margin-top: 37rpx;
		}

		.head-text {
			flex: 1;
		}

		.head-time {
			font-weight: 400;
			font-size: 26rpx;
			line-height: 30rpx;
			flex: 1;
			text-align: right;
		}

		.head-text text {
			font-weight: 400;
			font-size: 26rpx;
			line-height: 30rpx;
			text-align: left;
		}


		.head-text-icon {
			width: 24rpx;
			height: 25rpx;
			margin-right: 14rpx;
		}

		.loadmore {
			margin: 32rpx 0;
		}

		.content {
			margin: 24rpx 0;
		}

		.time {
			font-size: 24rpx;
		}

		.username {
			margin-bottom: 10rpx;
		}

		.details-reply {
			font-size: 24rpx;
			padding: 6rpx 12rpx;
			display: inline-block;
		}

		.details-comment {
			margin-left: 24rpx;
		}

		.details-list__item {
			display: flex;
			margin-top: 32rpx;
		}

		.details-list {
			padding: 32rpx;
		}

		.details-input {
			input {
				flex: 1;
				font-size: 28rpx;
				height: 70rpx;
				border-radius: 6rpx;
				padding: 0 24rpx;
				background-color: #e5e5e5;
			}

			display: flex;
			align-items: center;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 104rpx;
			padding: 32rpx;
		}

		.details-scroll {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 104rpx;
			left: 0;
		}

		.details-content {
			overflow: hidden;
			flex: 1;
			position: relative;
		}

		.user {
			.user-time {}

			.user-name {
				margin-bottom: 8rpx;
				font-size: 32rpx;
			}

			.user-right {
				margin-left: 24rpx;
				flex: 1;
			}

			padding: 30rpx;
			display: flex;
			align-items: center;
			border-top: 1rpx solid #352258;
			border-bottom: 1rpx solid #352258;
		}

		.head-title {
			font-size: 32rpx;
		}

		.head-tags {
			flex-direction: row;
			margin-top: 26rpx;
		}

		.head-tag {
			padding: 2rpx 8rpx;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 28rpx;
		}

		.head-tag.free {
			background: #0C5A30;
			color: #fff;
		}

		.head-tag.city {
			background: #581394;
			color: #fff;
			margin-left: 20rpx;
		}

		.head {
			padding: 32rpx;
		}

		.video {
			width: 750rpx;
		}

		height: 100vh;
		display: flex;
		flex-direction: column;
	}
</style>